$(() => {
    // 右侧，话费、旅游、彩票、游戏切换效果
    $('.service h2 span').mouseover(function () {
        $(this).addClass('on').siblings().removeClass('on');
        $('.service_wrap div').hide().eq($(this).index()).show();
    });

    // 导购区域切换效果，疯狂抢购，热卖商品，推荐商品，新品上架，猜您喜欢
    $('.guide_content h2 span').mouseover(function () {
        $(this).addClass('on').siblings().removeClass('on');
        $('.guide_wrap div').hide().eq($(this).index()).show();
    });

    // 各楼层区域切换
    $('.goodslist h2 span').mouseover(function () {
        $(this).addClass('on').siblings().removeClass('on');
        $(this).parent().parent().find('.goodslist_wrap div').hide().eq($(this).index()).show();
    })

    // 首页幻灯片效果
    let len = $('.slide_items li').length; // 获取图片的数目
    let init = 1; // 设置图片切换初始值，从第二张开始
    let dt = null; // 设置定时器

    // 定义一个函数完成动画
    function slide() {
        dt = setInterval(function () {
            // 大图切换
            $('.slide_items li').stop(true, false).fadeOut().eq(init).fadeIn();
            // 数字索引切换
            $('.slide_controls li').removeClass('on').eq(init).addClass('on');
            init++;
            if (init >= len) {
                init = 0;
            }
        }, 5000);
    }

    // 调用函数，实现动画
    slide();

    // 鼠标放置在图片上则停止幻灯，离开则继续
    $('.slide_items li').mouseover(function () {
        clearInterval(dt);
    }).mouseout(function () {
        slide();
    });

    // 鼠标放置到数字索引上时，立即切换到该图片上，并停止动画，离开则继续
    $('.slide_controls li').mouseover(function () {
        clearInterval(dt);
        init = $(this).index();
        $('.slide_items li').stop(true, false).fadeOut().eq(init).fadeIn();
        init++;
        if (init >= len) {
            init = 0;
        }
        $(this).addClass('on').siblings().removeClass('on');
    }).mouseout(function () {
        slide();
    });




    // 显示推荐商品
    $.get(wurl + '/system/recommend', response => {
        for (key in response.data) {
            let html = '';
            response.data[key] && response.data[key].forEach(item => {
                html += `<li>
                <dl>
                    <dt><a href="goods.html?id=${item.id}"><img src="${item.goodsThumb}" alt="" /></a></dt>
                    <dd><a href="">${item.goodsName}</a></dd>
                    <dd><span>售价：</span><strong> ￥${item.shopPrice}</strong></dd>
                </dl>
            </li>`
            });
            $('.' + key + '>ul').html(html);
        }
    });

    // 分类获取
    $.get(wurl + '/system/category', response => {
        let html = '';
        console.log(response);
        response.data.forEach((item, index) => {
            html += `<div class = "cat ${index == 0 ? 'item1' : ''}">
            <h3><a href="">${item.cateName}</a> <b></b></h3><div class="cat_detail">`;
            item.children && item.children.forEach((item, index) => {
                html += `<dl ${index == 0 ? 'class="dl_1st"' : ''}><dt><a href="">${item.cateName}</a></dt><dd>`;
                item.children && item.children.forEach(item => {
                    html += `<a href="">${item.cateName}</a>`;
                });


                html += `</dd></dl>`;
            });

            html += `</div></div>`;
        });
        $('.cat_bd').html(html);
        // 导航菜单效果
        $('.cat').hover(function () {
            $(this).find('.cat_detail').show();
            $(this).find('h3').addClass('on');
        }, function () {
            $(this).find('.cat_detail').hide();
            $(this).find('h3').removeClass('on');
        });
    });
});